<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		<!-- 页面中漂浮的图标 -->
		<view class="icon" v-for="(icon,index) in activityJson.icons" :key="icon.index" :style="icon.style"></view>
		<view class="tags">
			<template v-for="tag in tags" :key="tag.text">
				<button plain class="tag" v-if="tag.type === 'share' && isLogin" open-type="share">{{ tag.text }}</button>
				<button plain v-else class="tag" @click="toUrl(tag.url)">{{ tag.text }}</button>
			</template>
		</view>
		<view class="inner" :style="activityJson?.content?.style">
			<view class="top">
				<view class="scratch_view">
					<view class="scratch_view_father" id="canvas" :style="activityJson?.content?.canvas?.style">
						<view class="scratch_cover_view" :style="activityJson?.content?.canvas?.style">{{ rewardStrInfo.awardName }}</view>
						<canvas :style="{width: width+'px', height : height+'px'}" class="abs scratch_canvas" :class="{ disnone: drawTimes <= 0 }" :disable-scroll="true" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove" type="2d" id="scratch-card"></canvas>
						<image :src="activityJson?.content?.canvas?.img || layerImg" :style="activityJson?.content?.canvas?.style" class="abs scratch_canvas" :class="{ disnone: drawTimes > 0 }"></image>
					</view>
				</view>
				<view class="btn" :style="activityJson?.btn?.style" @click="onClick">
					{{ activityJson?.btn?.text }}
					<view class="tooltip">
						<view class="times">x {{ drawTimes }}</view>
						<view class="triangle"></view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="inner" :style="activityJson?.rule?.style">
					<view class="title" :style="activityJson?.rule?.title?.style">{{ activityJson?.rule?.title?.text }}</view>
					<text v-if="activityDetail.remark">{{ activityDetail.remark?.replace(/\\n/g, "\n") }}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
	<!-- 分享好友获取抽奖次数弹窗 -->
	<uni-popup ref="popupRef" type="center" :is-mask-click="false" catchtouchmove="true">
		<view class="popup-container">
			<view class="popup-content">
				<view class="popup-btns">
					<button plain open-type="share">立即分享</button>
				</view>
				<image class="popup-close" @click="onClose" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fe990e6d-b03c-41f8-95b6-360822d39dbf.png" mode=""></image>
			</view>
		</view>
	</uni-popup>
	<!-- 中奖弹窗 -->
	<uni-popup ref="awardPopupRef" type="center" :is-mask-click="false" catchtouchmove="true">
		<view class="award-popup-container">
			<view class="award-popup-close" @click="onCloseAward"></view>
			<view class="award-popup-inner">{{ rewardStrInfo.awardName }}</view>
			<view class="award-popup-btn" @click="onJumpAwardDetail(rewardStrInfo)"></view>
		</view>
	</uni-popup>

</template>

<script>
	import { $activityTakePartIn, $getAwardTimes } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'

	let canvas = null;
	let ctx = null;

	export default {
		data() {
			return {
				layerImg: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/37931004-0c13-43d1-8e06-e56230e3ab20.png',
				touchSize: 20,
				fillColor: '#ddd',
				recordList: [],
				watermark: '刮一刮',
				watermarkColor: '#c5c5c5',
				watermarkSize: 14,
				title: '刮一刮开奖',
				titleColor: '#888',
				titleSize: 24,
				disabled: true,
				rewardInstruction: '',
				cantManageFlag: false,

				width: 0,
				height: 0,
				startX: null,
				startY: null,
				computing: false,
				complete: false,
				stopRewardFlag: false,
				reset: false,
				ready: false,
				cantManage: this.cantManageFlag,
				cantRequest: true,
				rewardStrInfo: {},


				activityId: '', // 活动ID
				activityDetail: {}, // 活动详情
				activityChannelId: null,	// 活动渠道码
				rewardStr: "", // 刮开的奖品
				percentage: 20, // 刮开多少显示奖品
				drawTimes: 0, // 抽奖次数
				hasMchNo: undefined, // 是否是商家版活动 当前用户是否绑定商户号
				isClick: false, // 防止重复点击


				isLogin: false, // 登录
				// 分享相关字段
				shareFansId: '', // 分享人的fansId
				// 标签列表
				tags: [
					// { text: '分享记录', url: '/pagesActivity/scratchCard/shareRecords' },
					// { text: '我的奖品', url: '/pagesActivity/scratchCard/awardRecords' },
					// { text: '链接分享', type: 'share' },
				],
				
				// 默认活动内容
				activityJson:{
					"wrapper":{
						"style":{
							"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a48ec8f2-bb2d-4c30-b653-436068d5ee62.png') no-repeat left top / 100% 1684rpx,url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/1b415f33-7b81-4611-b46d-827a45493826.png') no-repeat left bottom / 100% 322rpx, #9C0808"
						}
					},
					"content":{
						"canvas":{
							"img":"https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/37931004-0c13-43d1-8e06-e56230e3ab20.png",
							"style":{
								"width":"562rpx",
								"height":"526rpx"
							}
						},
						"style":{
							"margin-top":"865rpx"
						}
					},
					"btn":{
						"text":"",
						"style":{
							"width":"554rpx",
							"height":"170rpx",
							"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a274a136-ef00-4322-a877-aa9810ded561.png') no-repeat left top / 100% 100%"
						}
					},
					"rule":{
						"title":{
							"text":"",
							"style":{
								"width":"205rpx",
								"height":"54rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/693ed55a-f660-4753-adaa-6d9e8b11a851.png') no-repeat left top / 100% 100%"
							}
						},
						"style":{
							"background":"#FFF7F1"
						}
					},
					"icons":[
						{
							"style":{
								"width":"120rpx",
								"height":"94rpx",
								"right":"20rpx",
								"top":"834rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fada2119-1211-4c41-b710-a7519e380ec5.png') no-repeat left top / 100% 100%"
							}
						},{
							"style":{
								"width":"102rpx",
								"height":"96rpx",
								"left":"0",
								"top":"1296rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ca7a8128-c457-4b4d-8b80-9874505a2c86.png') no-repeat left top / 100% 100%"
							}
						},{
							"style":{
								"width":"87rpx",
								"height":"81rpx",
								"left":"0",
								"bottom":"348rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/aa354684-4683-4df0-b108-f472de3c6f20.png') no-repeat left top / 100% 100%"
							}
						},{
							"style":{
								"width":"80rpx",
								"height":"72rpx",
								"left":"122rpx",
								"bottom":"82rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/aa354684-4683-4df0-b108-f472de3c6f20.png') no-repeat left top / 100% 100%"
							}
						},{
							"style":{
								"width":"70rpx",
								"height":"62rpx",
								"left":"232rpx",
								"bottom":"187rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/991178d4-4c1b-48bf-b9ad-07ba22e9280b.png') no-repeat left top / 100% 100%"
							}
						},{
							"style":{
								"width":"93rpx",
								"height":"84rpx",
								"left":"518rpx",
								"bottom":"112rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/991178d4-4c1b-48bf-b9ad-07ba22e9280b.png') no-repeat left top / 100% 100%"
							}
						},{
							"style":{
								"width":"33rpx",
								"height":"39rpx",
								"left":"654rpx",
								"bottom":"709rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/dc9061a3-b134-4d9e-945e-d9297a71a557.png') no-repeat left top / 100% 100%"
							}
						},{
							"style":{
								"width":"67rpx",
								"height":"70rpx",
								"left":"667rpx",
								"bottom":"572rpx",
								"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/46b074e2-1089-4ab5-af92-f5036567421b.png') no-repeat left top / 100% 100%"
							}
						}
					]
				}
			}
		},
		mounted() {
			// 请求抽奖次数
			if (this.isLogin) {
				this.getDrawTimes()
			} else { // 未登录给出登录弹窗
				this.$nextTick(() => {
					this.$refs.gzLoginPopupRef.open()
				})
			}
		},
		async onLoad({ activityId, activityDetail, shareParams, activityChannelId }) {
			this.isLogin = storageManage.isLogin()
			this.activityId = activityId
			this.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
			this.activityChannelId = activityChannelId
			// 活动动态参数
			this.activityJson = JSON.parse(this.activityDetail.activityJson || '{}')
			// 标题更改为活动名称
			uni.setNavigationBarTitle({
				title: this.activityDetail.activityName || '幸运刮刮乐'
			})
			// 判断是否是分享进来的用户 如果是记录分享人的id 被分享人在参与活动时 需要携带分享人的fansId
			if (shareParams) {
				this.shareFansId = JSON.parse(shareParams).fansId
			}
		},
		// 分享事件
		onShareAppMessage() {
			return {
				title: this.activityDetail.activityShareEntity?.shareText || this.activityDetail.activityName || '幸运刮刮乐',
				path: `/pages/welcome/index?share=${JSON.stringify({ fansId: storageManage.fansId(), activityId: this.activityId })}`,
				imageUrl: this.activityDetail.activityShareEntity?.shareImgAppMessage
			}
		},
		async onShow() {
			this.isLogin = storageManage.isLogin()
		},
		methods: {
			getRect(e) {
				const query = uni.createSelectorQuery()
				query.select('#canvas').fields({ size: true }).exec(() => {
					query.select('#scratch-card').fields({ node: true, size: true }).exec((res) => {
						this.width = res[0].width;
						this.height = res[0].height;
						canvas = res[1].node
						ctx = canvas.getContext('2d')
						const dpr = wx.getSystemInfoSync().pixelRatio
						canvas.width = res[0].width
						canvas.height = res[0].height
						// ctx.scale(dpr, dpr)
						setTimeout(e => {
							this.init();
						}, 20);
					})
				});
			},
			/**
			 * 绘制文字水印
			 */
			fillWatermark(e) {
				// ctx.save();
				const image = canvas.createImage()
				image.src = this.activityJson?.content?.canvas?.img || this.layerImg
				image.onload = () => {
					ctx.drawImage(image, 0, 0, this.width, this.height)
					// ctx.restore();
				}
				// ctx.drawImage(this.layerImg, 0, 0, this.width, this.height)
				// ctx.restore();
			},
			/**
			 * 绘制标题
			 */
			fillTitle(e) {
				if (!this.title) {
					return;
				}
				// ctx.setTextAlign("center");
				ctx.textAlign = 'center'
				// ctx.setTextBaseline("middle");
				ctx.textBaseline = 'middle'
				// ctx.setFillStyle(this.titleColor);
				ctx.fillStyle = this.titleColor
				ctx.font = this.titleSize
				ctx.fillText(this.title, this.width / 2, this.height / 2);
			},

			touchstart(e) {
				// 用户未登录
				if (!this.isLogin) {
					this.$refs.gzLoginPopupRef.open()
					return false
				}
				if (this.hasMchNo === 'noMchNo') {
					uni.showModal({
						title: '参与失败',
						content: '当前用户未绑定商户身份，请绑定商户身份',
						success({ cancel }) {
							if (cancel) return
							uni.navigateTo({
								url: '/pageUser/bindMch/index'
							})
						}
					})
					return false
				}
				if (!this.drawTimes) {
					this.$infoBox.toast('您的抽奖机会已用尽')
					return false
				}
				if (this.stopRewardFlag) {
					// console.log('抽奖结束')
					return false;
				}
				this.startX = e.touches[0].x;
				this.startY = e.touches[0].y;
			},
			touchend(e) {
				this.getFilledPercentage();
			},
			touchmove(e) {
				let that = this
				if (that.complete || that.cantManage || that.hasMchNo === 'noMchNo' || !this.drawTimes) {
					return;
				}
				ctx.moveTo(that.startX, that.startY);
				ctx.clearRect(that.startX, that.startY, that.touchSize, that.touchSize);
				// ctx.draw(true);
				//记录移动点位
				that.startX = e.touches[0].x;
				that.startY = e.touches[0].y;
				//判断
				if (that.cantRequest) {
					const res = ctx.getImageData(0, 0, that.width, that.height)
					let pixels = res.data;
					let transPixels = [];
					for (let i = 0; i < pixels.length; i += 4) {
						if (pixels[i + 3] < 128) {
							transPixels.push(pixels[i + 3]);
						}
					}
					var percent = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);
					if (percent > 0) {
						that.cantRequest = false;
						that.extractReward();
					}
				}
			},

			getFilledPercentage(e) {
				if (this.computing) {
					return;
				}
				this.computing = true;
				const res = ctx.getImageData(0, 0, this.width, this.height)
				let pixels = res.data;
				let transPixels = [];
				for (let i = 0; i < pixels.length; i += 4) {
					if (pixels[i + 3] < 128) {
						transPixels.push(pixels[i + 3]);
					}
				}
				var percent = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);
				if (percent > 3 && this.cantRequest) {
					this.cantRequest = false;
					this.extractReward();
				}
				if (percent >= this.percentage) {
					uni.showLoading()
					this.takePartInActivity()
				}
				this.computing = false;
			},

			success(e) {
				this.complete = true;
				if (this.reset) {
					return;
				}
				this.reset = true;
				ctx.moveTo(0, 0);
				ctx.clearRect(0, 0, this.width, this.height);
				ctx.stroke();
				// ctx.draw(true);
				this.endScratch(this.rewardStrInfo)
			},
			extractReward() {
				this.goPlayReward({ index: 3 })
			},
			openReward(item) {
				this.rewardStrInfo = {
					type: item.type,
					awardName: item.awardName,
					awardType: item.awardType,
					awardId: item.awardId,
					fansAwardId: item.fansAwardId
				}
			},
			stopReward() {
				this.stopRewardFlag = true;
			},
			init(e) {
				this.computing = false;
				this.complete = false;
				this.reset = false;
				this.ready = false;
				ctx.clearRect(0, 0, this.width, this.height);
				//绘制画布
				// ctx.setFillStyle(this.fillColor);
				ctx.fillStyle = this.fillColor
				ctx.fillRect(0, 0, this.width, this.height);
				this.ready = true;
				//绘制文字水印
				this.fillWatermark();
				//绘制标题
				// this.fillTitle();
				// ctx.draw();
			},
			onClick() {
				// 用户未登录
				if (!this.isLogin) {
					this.$refs.gzLoginPopupRef.open()
					return false
				}
				if (this.hasMchNo === 'noMchNo') {
					uni.showModal({
						title: '参与失败',
						content: '当前用户未绑定商户身份，请绑定商户身份',
						success({ cancel }) {
							if (cancel) return
							uni.navigateTo({
								url: '/pageUser/bindMch/index'
							})
						}
					})
					return false
				}
				// 抽奖次数
				if (!this.drawTimes) { // 抽奖机会用尽 引导用户分享
					// 弹窗提示
					// this.$refs.popupRef.open()
					this.$infoBox.toast('您的抽奖次数已用完！')
					return false
				}
				if (this.isClick) return
				this.isClick = true
				uni.showLoading({
					title: '努力刮开中'
				})
				this.takePartInActivity(true)
			},
			endScratch({ awardName, type, award }) {
				if (type === 1) {
					// this.$infoBox.toast('恭喜您中奖')
					// this.getRect()
					// 打开奖品弹窗
					this.onOpenAward()
				} else {
					this.$infoBox.toast('很遗憾您未中奖')
					setTimeout(() => {
						this.getRect()
						this.openReward({})
					}, 1500)
				}
			},
			goPlayReward(v) {

			},
			takePartInActivity(isBtn = false) {
				const reqObj = {
					activityId: this.activityId,
					activityTemplateNo: this.activityDetail.activityTemplateNo,
					activityChannelId: this.activityChannelId
				}
				if (this.shareFansId) {
					reqObj.shareFansId = this.shareFansId
					reqObj.isShareFriend = true // 涉及参与方式
				}
				$activityTakePartIn(reqObj).then(({ code, bizData }) => {
					uni.hideLoading()
					const result = {}
					if (!bizData.awardName) {
						result.type = 0
						result.awardName = '谢谢参与'
					} else {
						result.type = 1
						Object.assign(result, bizData)
					}
					this.openReward(result)
					this.success()
					this.drawTimes -= 1
				}).catch(() => {
					this.getRect()
					this.openReward({})
				}).finally(() => {
					this.isClick = false
				})
			},

			// 页面跳转
			toUrl(url) {
				// 用户未登录
				if (!this.isLogin) {
					this.$refs.gzLoginPopupRef.open()
					return
				}
				uni.navigateTo({
					url: url + '?activityId=' + this.activityId
				})
			},
			// 登录回调
			isLoginCallback() {
				if (!this.isLogin) {
					this.$infoBox.toast('登录失败，无法正常参与活动！')
				} else {
					// 登陆成功后 请求抽奖次数
					this.getDrawTimes()
				}
			},
			// 请求抽奖次数
			async getDrawTimes() {
				try {
					const result = await $getAwardTimes(this.activityId, this.activityDetail.activityTemplateNo)
					this.drawTimes = result
					this.hasMchNo = undefined
				} catch (e) {
					//TODO handle the exception
					this.hasMchNo = e
				}
				// 校验用户抽奖次数
				this.checkDrawTimesOpenPopup()
				if (this.drawTimes > 0) {
					this.getRect();
				}
			},
			// 校验抽奖次数 如果抽奖次数为 0 则进行弹窗引导分享
			checkDrawTimesOpenPopup() {
				// 校验当前抽奖次数
				if (this.drawTimes <= 0) {
					// 弹窗提示
					// this.$refs.popupRef.open()
					this.$infoBox.toast('您的抽奖次数已用完！')
				}
			},
			// 弹窗关闭
			onClose() {
				this.$refs.popupRef.close()
			},
			// 跳转奖品详情
			onJumpAwardDetail(info) {
				// console.log(info);
				const { awardType, awardId, fansAwardId } = info
				let jumpUrl = '' // 跳转的页面地址
				if (awardType === 0) { // 卡券
					jumpUrl = `/pageUser/myCoupon/viewInfo?fansAwardId=${fansAwardId}&couponId=${awardId}`
				} else if (awardType === 1) { // 实物
					jumpUrl = `/pageUser/myAward/viewInfo?fansAwardId=${fansAwardId}&goodsId=${awardId}`
				} else if (awardType === 3) { // 福分
					jumpUrl = '/pageUser/scoreRecords/index'
				}
				uni.navigateTo({
					url: jumpUrl
				})
			},
			// 打开奖品弹窗
			onOpenAward() {
				this.$refs.awardPopupRef.open()
			},
			// 关闭奖品弹窗
			onCloseAward() {
				this.$refs.awardPopupRef.close()
				this.openReward({})
				this.getRect()
			}
		}
	}
</script>

<style lang="less" scoped>
	.award-popup-container {
		.award-popup-close {
			width: 55rpx;
			height: 55rpx;
			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/01eb3f8f-2b58-4e73-a5af-416d57819ab8.png') no-repeat left top / 100% 100%;
			float: right;
		}

		.award-popup-inner {
			width: 646rpx;
			height: 626rpx;
			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a39fe42f-a062-4926-b802-8dc9289bbf6a.png') no-repeat left top / 100% 100%;
			padding-top: 206rpx;
			box-sizing: border-box;
			text-align: center;
			font-family: YouSheBiaoTiHei;
			color: #FF5425;
			font-size: 52rpx;
		}

		.award-popup-btn {
			width: 375rpx;
			height: 101rpx;
			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/c6bdce97-09af-4ed7-b41e-a3fb733e4f0a.png') no-repeat left top / 100% 100%;
			margin: 10rpx auto;
		}
	}

	.popup-container {
		position: relative;

		.popup-content {
			width: 750rpx;
			height: 1198rpx;
			background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/bcfffe40-b060-4639-96d0-561c929166a0.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: 0 0;
			padding-top: 770rpx;
			box-sizing: border-box;
			text-align: center;

			.popup-btns {
				button {
					border: none;
					padding: 16rpx 40rpx;
					color: #ff3d00;
					background: linear-gradient(to bottom, #fffcf5, #fab575);
					max-width: 280rpx;
					font-weight: bold;
					border-radius: 45rpx;
					line-height: 1;
				}
			}

			.popup-close {
				width: 51rpx;
				height: 51rpx;
				margin-top: 100rpx;
			}
		}
	}

	.disnone {
		visibility: hidden;
		z-index: -999 !important;
		left: -99999px;
		top: -99999px;
	}

	.scratch_view {
		position: relative;
		overflow: hidden;
	}

	.scratch_view_father {
		display: flex;
		margin: 0 auto;
		justify-content: center;
		align-items: center;
		z-index: 1;
		width: 562rpx;
		height: 526rpx;
	}

	.scratch_view_father .scratch_cover_view {
		display: inline-block;
		position: absolute;
		color: #F29100;
		font-size: 40rpx;
		z-index: 2;
		background: #fff;
		text-align: center;
		width: 562rpx;
		height: 526rpx;
	}

	.scratch_view_father .scratch_canvas {
		display: inline-block;
		position: absolute;
		z-index: 2;
		width: 562rpx;
		height: 526rpx;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		position: relative;
		box-sizing: border-box;
		padding-bottom: 125rpx;
		overflow: hidden;
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a48ec8f2-bb2d-4c30-b653-436068d5ee62.png') no-repeat left top / 100% 1684rpx,
					url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/1b415f33-7b81-4611-b46d-827a45493826.png') no-repeat left bottom / 100% 322rpx,
					#9C0808;
		.icon {
			position: absolute;
			z-index: 9;
		}

		.icon1 {
			width: 87rpx;
			height: 81rpx;
			bottom: 348rpx;
			left: 0;
		}

		.icon2 {
			width: 80rpx;
			height: 72rpx;
			bottom: 82rpx;
			left: 122rpx;
		}

		.icon3 {
			width: 70rpx;
			height: 62rpx;
			bottom: 187rpx;
			left: 232rpx;
		}

		.icon4 {
			width: 93rpx;
			height: 84rpx;
			bottom: 112rpx;
			left: 518rpx;
		}

		.icon5 {
			width: 33rpx;
			height: 39rpx;
			bottom: 709rpx;
			left: 654rpx;
		}

		.icon6 {
			width: 67rpx;
			height: 70rpx;
			bottom: 572rpx;
			left: 667rpx;
		}

		.tags {
			position: absolute;
			top: 73rpx;
			right: 0;
			display: flex;
			flex-direction: column;
			gap: 14rpx;

			.tag {
				min-width: 120rpx;
				border-radius: 30rpx 0rpx 0rpx 30rpx;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.3);
				font-size: 24rpx;
				padding: 13rpx 0;
				text-align: center;
				border: none;
				line-height: initial;
			}
		}

		&>.inner {
			width: 100%;
			margin-top: 865rpx;

			.top {
				width: 100%;
				box-sizing: border-box;

				.btn {
					text-align: center;
					position: relative;
					
					margin: 40rpx auto 0;
					width: 554rpx;
					height: 170rpx;
					background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a274a136-ef00-4322-a877-aa9810ded561.png') no-repeat left top / 100% 100%;

					.tooltip {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);

						.times {
							background: #F9E3CD;
							color: #8C3619;
							font-size: 26rpx;
							padding: 5rpx 15rpx;
							border-radius: 30rpx;
							border: 4rpx solid #fff;
							position: relative;
							z-index: -1;
							font-weight: bold;
						}

						.triangle {
							width: 15rpx;
							height: 15rpx;
							background: #F9E3CD;
							border-right: 4rpx solid #fff;
							border-bottom: 4rpx solid #fff;
							transform: rotate(45deg);
							position: relative;
							top: -11rpx;
							z-index: 1;
							left: 50%;
							transform: rotate(45deg);
							margin-left: -7.5rpx;
						}
					}
				}

			}

			.bottom {
				width: calc(100% - 64rpx);
				margin: 108rpx 32rpx 0;
				background-color: #FFF2D0;
				border-radius: 24rpx;
				padding: 40rpx 24rpx 44rpx;
				box-sizing: border-box;
				position: relative;

				&::before,
				&::after {
					content: '';
					display: block;
					width: 26rpx;
					height: 78rpx;
					background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/51659aad-f799-4b56-adfb-dc39b96333b9.png') no-repeat left top / 100% 100%;
					position: absolute;
					top: -50rpx;
				}

				&::before {
					left: 61rpx;
				}

				&::after {
					right: 61rpx;
				}

				.inner {
					position: relative;
					padding: 0 33rpx 79rpx;
					box-sizing: border-box;
					overflow: hidden;
					background: #FFF7F1;
					box-shadow: 0 0 8rpx 8rpx #F8C68F;
					border-radius: 0 0 45rpx 0;

					&::before {
						content: '';
						display: block;
						width: 87rpx;
						height: 81rpx;
						background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/59e36ff1-89fb-4108-85dd-1b2419b09a19.png') no-repeat left top / 100% 100%;
						position: absolute;
						top: 13rpx;
						right: 17rpx;
					}

					&::after {
						content: '';
						display: block;
						width: 56rpx;
						height: 35rpx;
						background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ded01408-fe2a-4bea-ab8c-eaff8c35cbd3.png') no-repeat left top / 100% 100%;
						position: absolute;
						bottom: 0;
						right: 0;
					}

					.title {
						display: block;
						margin: 30rpx auto;
						width: 205rpx;
						height: 54rpx;
						background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/693ed55a-f660-4753-adaa-6d9e8b11a851.png') no-repeat left top / 100% 100%;
					}

					text {
						color: #A96544;
					}
				}
			}
		}
	}
</style>